<template>
  <el-drawer
    :title="title"
    :visible.sync="isActive"
    direction="rtl"
    :before-close="handleClose"
    size="40%"
    @open="this.getAll"
  >
    <el-table
      :data="tableData"
      :border="true"
      :key="true"
      max-height="500px"
      style="width: 100%"
    >
      <el-table-column type="index" align="center" label="序号">
      </el-table-column>
      <el-table-column prop="nickName" align="center" label="姓名">
      </el-table-column>
      <el-table-column prop="phonenumber" label="手机号" width="120">
      </el-table-column>
      <el-table-column prop="sex" label="性别" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.sex == 0">男</span>
          <span v-if="scope.row.sex == 1">女</span>
        </template>
      </el-table-column>
      <el-table-column prop="memberType" label="组员类别" align="center">
        <template slot-scope="scope">
          <span style="color: red" v-if="scope.row.memberType == 1">组长</span>
          <span v-if="scope.row.memberType == 2">组员</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button @click="handleDelete(scope.row)" type="text" size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-button style="margin-top: 20px" @click="showAdd(2)"
      >点此新增组员</el-button
    >
    <el-button style="margin-top: 20px" :disabled="typeFlag" @click="showAdd(1)"
      >点此新增组长</el-button
    >
    <el-dialog
      :title="this.addFlag == 1 ? '组长' : '组员'"
      :visible.sync="dialogVisible"
      v-if="dialogVisible"
      width="50%"
      :append-to-body="true"
    >
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        label-width="68px"
      >
        <el-form-item label="用户名称" prop="userName">
          <el-input
            v-model="queryParams.userName"
            placeholder="请输入用户名称"
            clearable
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="手机号码" prop="phonenumber">
          <el-input
            v-model="queryParams.phonenumber"
            placeholder="请输入手机号码"
            clearable
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <el-table
        ref="singleTable"
        :data="addTableData"
        highlight-current-row
        style="width: 100%"
        max-height="400px"
        @current-change="handleCurrentChange"
        @selection-change="handleSelectionChange"
      >
        <el-table-column v-if="this.addFlag == 2" type="selection" width="55">
        </el-table-column>
        <el-table-column prop="nickName" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="phonenumber" label="手机号" width="120">
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.sex == 0">男</span>
            <span v-if="scope.row.sex == 1">女</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="phonenumber"
          label="电话号码"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUsualMember(addFlag)"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </el-drawer>
</template>

<script>
import { listReduceUser } from "@/api/system/diagnosistask";
import { listMember, addMember,addMemberList, delMember } from "@/api/system/member";
export default {
  props: {
    isActive: {
      type: Boolean,
      default: false,
    },
    detData: {
      type: Number,
      default: null,
    },
    title: {
      type: String,
      default: "编辑",
    },
  },
  data() {
    return {
      // 人员添加列表
      allTableData: [],
      addTableData: [],
      currentRow: null,
      multipleSelection: null,
      // 抽屉控件
      drawer: false,
      tableData: [],
      dialogVisible: false,
      // 组长组员flag
      typeFlag: false,
      addFlag: 1,
      // 查询参数
      queryParams: {
        userName: undefined,
        phonenumber: undefined,
      },
    };
  },

  // computed: {
  //   addTableData() {
  //     console.log("first");
  //     return this.allTableData.filter(
  //       (item) => !this.tableData.some((ele) => ele.id === item.id)
  //     );
  //   },
  // },

  methods: {
    handleQuery() {
      this.getReduceUser(this.queryParams);
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.getReduceUser(this.queryParams);
    },
    // 组长置顶
    upLeader(arr) {
      for (var i = 0; i < arr.length; i++) {
        if (arr[i].memberType == 1) {
          let temp = arr[i];
          arr.splice(i, 1);
          arr.unshift(temp);
          break;
        }
      }
    },
    // 人员添加方法
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    // 添加普通组员
    addUsualMember(flag) {
      let param = {};
      if (flag == 2) {
        this.multipleSelection.map(
          (item) => (
            (item.deptId = this.detData),
            (item.memberType = "2")
          )
        );
        //组员
        param = this.multipleSelection;

        addMemberList(param).then((res) => {
        console.log(res, "添加结果");
        this.getDeptMember();
      });
      this.dialogVisible = false;


      } else if (flag == 1) {
        param = {
          deptId: this.detData,
          memberType: "1",
          userId: this.currentRow.userId,
        };
        addMember(param).then((res) => {
        console.log(res, "添加结果");
        this.getDeptMember();
      });
      this.dialogVisible = false;
      }
      console.log(param, "param");

    },
    // 显示新增弹窗
    showAdd(flag) {
      this.addFlag = flag;
      this.dialogVisible = true;
    },
    handleClose(done) {
      this.$emit("closeDrawer");
    },
    // 删除人员
    handleDelete(row) {
      console.log(row, "要删除的人员数据");
      delMember(row.memberId).then((res) => {
        console.log(res, "删除结果");
        this.getDeptMember();
      });
    },
    // 获取精简人员列表
    getReduceUser(params) {
      listReduceUser(params).then((response) => {
        console.log(response, "精简人员列表");
        this.allTableData = response.data;
        console.log(this.detData, "detdata");
        this.getDeptMember();
      });
    },
    // 获取诊断企业人员
    getDeptMember() {
      let param = {
        deptId: this.detData,
      };
      listMember(param).then((res) => {
        console.log(res, "成员列表");
        this.tableData = res.data;

        console.log(
          this.allTableData.filter(
            (item) => !this.tableData.some((ele) => ele.userId === item.userId)
          )
        );
        this.addTableData = this.allTableData.filter(
          (item) => !this.tableData.some((ele) => ele.userId === item.userId)
        );

        if (this.tableData) {
          this.typeFlag = res.data.some((item) => item.memberType == 1);
        }
        this.upLeader(this.tableData);
        console.log(this.tableData, "排序");
      });
    },
    getAll() {
      this.getReduceUser(this.queryParams);
    },
  },
  computed: {},
  created() {},
};
</script>

<style lang="scss" scoped>
::v-deep .el-drawer__body {
  padding-left: 20px;
}
</style>
